<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台</title>
    <link rel="stylesheet" href="../components/libs/fontawesome/6.7.2/css/all.min.css" />
    <link rel="stylesheet" href="../components/common/base.css">
    <link rel="stylesheet" href="./index.css" />
    <!-- 天地图API -->
    <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=e5076cd5fc078a8ff411a2101f52bb6d"></script>
</head>

<body class="bg-dark-gradient">
    <!-- 顶部导航组件 -->
    <header class="layout-header">
        <!-- Logo区域 -->
        <div class="layout-logo">
            <i class="fas fa-traffic-light logo-icon"></i>
            <span class="logo-text">干线协调优化平台</span>
        </div>
        
        <!-- 弹性空间 -->
        <div class="header-spacer"></div>
        
        <!-- 业务菜单 -->
        <nav class="header-nav">
            <a href="index.html" class="nav-item active" data-action="home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="greenwave-sections.html" class="nav-item" data-action="sections">
                <i class="fas fa-road"></i>
                <span>绿波路段</span>
            </a>
            <a href="cal.html" class="nav-item" data-action="greenwave">
                <i class="fas fa-calculator"></i>
                <span>绿波计算</span>
            </a>
            <a href="tracking.html" class="nav-item" data-action="tracking">
                <i class="fas fa-route"></i>
                <span>绿波效果跟踪</span>
            </a>
            <a href="history.html" class="nav-item" data-action="history">
                <i class="fas fa-history"></i>
                <span>历史方案</span>
            </a>
            <a href="work.html" class="nav-item" data-action="work">
                <i class="fas fa-clipboard-list"></i>
                <span>工作记录</span>
            </a>
        </nav>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
        <!-- 地图容器 -->
        <div class="map-container">
            <div id="mapContainer" class="map-content"></div>
        </div>
        
        <!-- 左侧数据面板 -->
        <div class="data-panel left-panel">
            <div class="panel-header">
                <h3 class="panel-title">
                    <i class="fas fa-chart-bar"></i>
                    实时统计
                </h3>
                <button class="panel-toggle" data-panel="left">
                    <i class="fas fa-chevron-left"></i>
                </button>
            </div>
            <div class="panel-content">
                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-icon">
                            <i class="fas fa-crosshairs"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">12</div>
                            <div class="stat-label">活跃路口</div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-icon success">
                            <i class="fas fa-wave-square"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">3</div>
                            <div class="stat-label">绿波干线</div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-icon info">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">85.2%</div>
                            <div class="stat-label">平均效率</div>
                        </div>
                    </div>
                </div>
                
                <!-- 跟踪记录摘要 -->
                <div class="summary-section">
                    <h4 class="section-title">
                        <i class="fas fa-route"></i>
                        今日跟踪
                    </h4>
                    <div class="tracking-summary">
                        <div class="summary-item">
                            <span class="summary-label">跟踪记录</span>
                            <span class="summary-value">2,847</span>
                        </div>
                        <div class="summary-item">
                            <span class="summary-label">成功通过</span>
                            <span class="summary-value success">2,456</span>
                        </div>
                        <div class="summary-item">
                            <span class="summary-label">异常记录</span>
                            <span class="summary-value warning">391</span>
                        </div>
                    </div>
                </div>
                
                <!-- 路口状态 -->
                <div class="summary-section">
                    <h4 class="section-title">
                        <i class="fas fa-traffic-light"></i>
                        路口状态
                    </h4>
                    <div class="intersection-list">
                        <div class="intersection-status">
                            <div class="status-indicator online"></div>
                            <span class="intersection-name">金鸡岭路-金鸡岭社区</span>
                            <span class="efficiency-badge">92%</span>
                        </div>
                        <div class="intersection-status">
                            <div class="status-indicator online"></div>
                            <span class="intersection-name">凤凰路-金鸡岭街</span>
                            <span class="efficiency-badge">88%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧数据面板 -->
        <div class="data-panel right-panel">
            <div class="panel-header">
                <button class="panel-toggle" data-panel="right">
                    <i class="fas fa-chevron-right"></i>
                </button>
                <h3 class="panel-title">
                    <i class="fas fa-cogs"></i>
                    控制面板
                </h3>
            </div>
            <div class="panel-content">
                <!-- 计算控制 -->
                <div class="summary-section">
                    <h4 class="section-title">
                        <i class="fas fa-calculator"></i>
                        绿波计算
                    </h4>
                    <div class="calc-status">
                        <div class="progress-info">
                            <span class="progress-label">计算进度</span>
                            <span class="progress-value">65%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 65%"></div>
                        </div>
                        <div class="calc-result">
                            <div class="result-item">
                                <span class="result-label">绿波带宽</span>
                                <span class="result-value">42s</span>
                            </div>
                            <div class="result-item">
                                <span class="result-label">协调效率</span>
                                <span class="result-value">87.5%</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 历史方案 -->
                <div class="summary-section">
                    <h4 class="section-title">
                        <i class="fas fa-history"></i>
                        最近方案
                    </h4>
                    <div class="scheme-list">
                        <div class="scheme-item">
                            <div class="scheme-status implemented"></div>
                            <div class="scheme-info">
                                <div class="scheme-name">金鸡岭路干线优化</div>
                                <div class="scheme-time">2小时前</div>
                            </div>
                            <div class="scheme-effect">+18%</div>
                        </div>
                        <div class="scheme-item">
                            <div class="scheme-status pending"></div>
                            <div class="scheme-info">
                                <div class="scheme-name">凤凰路协调方案</div>
                                <div class="scheme-time">5小时前</div>
                            </div>
                            <div class="scheme-effect">+15%</div>
                        </div>
                    </div>
                </div>
                
                <!-- 工作记录 -->
                <div class="summary-section">
                    <h4 class="section-title">
                        <i class="fas fa-clipboard-list"></i>
                        工作状态
                    </h4>
                    <div class="work-summary">
                        <div class="work-item">
                            <span class="work-label">今日任务</span>
                            <span class="work-value">342</span>
                        </div>
                        <div class="work-item">
                            <span class="work-label">已完成</span>
                            <span class="work-value success">298</span>
                        </div>
                        <div class="work-item">
                            <span class="work-label">在线人员</span>
                            <span class="work-value info">8</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="./index.js"></script>
    <script>
        // 绿波路段数据（百度坐标）
        const greenwaveData = [
            {
                "name": "金鸡岭路-金鸡岭社区",
                "x": 109.507592,
                "y": 18.288802
            },
            {
                "name": "凤凰路-金鸡岭街（市一中路口）",
                "x": 109.510327,
                "y": 18.291272
            }
        ];

        let map;

        // 百度坐标转天地图坐标
        function baiduToTianditu(lng, lat) {
            const PI = 3.1415926535897932384626;
            const x_pi = 3.14159265358979324 * 3000.0 / 180.0;
            
            // 百度坐标转火星坐标
            let x = lng - 0.0065;
            let y = lat - 0.006;
            let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
            let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
            
            // 火星坐标转WGS84坐标（天地图使用WGS84）
            lng = z * Math.cos(theta);
            lat = z * Math.sin(theta);
            
            return {
                lng: lng,
                lat: lat
            };
        }

        // 初始化地图
        function initMap() {
            try {
                // 创建地图实例，定位到三亚市
                map = new T.Map('mapContainer');
                
                // 转换中心点坐标
                const centerCoord = baiduToTianditu(109.509, 18.290);
                map.centerAndZoom(new T.LngLat(centerCoord.lng, centerCoord.lat), 15);

                // 不添加地图工具栏控件，保持简洁

                // 添加绿波路段标记和连线
                addGreenwaveMarkers();
                
                console.log('地图初始化成功');
            } catch (error) {
                console.error('地图初始化失败:', error);
                // 如果天地图加载失败，显示提示信息
                document.getElementById('mapContainer').innerHTML = `
                    <div class="map-error">
                        <i class="fas fa-exclamation-triangle"></i>
                        <h3>地图加载失败</h3>
                        <p>请检查网络连接或天地图API密钥设置</p>
                        <p>当前显示模拟地图界面</p>
                    </div>
                `;
            }
        }

        // 添加绿波路段标记和连线
        function addGreenwaveMarkers() {
            if (!map || !window.T) return;

            const points = [];
            const markers = [];

            // 添加路口标记
            greenwaveData.forEach((point, index) => {
                // 转换百度坐标为天地图坐标
                const convertedCoord = baiduToTianditu(point.x, point.y);
                const lngLat = new T.LngLat(convertedCoord.lng, convertedCoord.lat);
                points.push(lngLat);

                // 创建自定义图标
                const icon = new T.Icon({
                    iconUrl: 'data:image/svg+xml;base64,' + btoa(`
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                            <circle cx="16" cy="16" r="12" fill="#4CAF50" stroke="#ffffff" stroke-width="3"/>
                            <circle cx="16" cy="16" r="6" fill="#ffffff"/>
                            <text x="16" y="20" text-anchor="middle" fill="#4CAF50" font-size="12" font-weight="bold">${index + 1}</text>
                        </svg>
                    `),
                    iconSize: new T.Point(32, 32),
                    iconAnchor: new T.Point(16, 16)
                });

                // 创建标记
                const marker = new T.Marker(lngLat, { icon: icon });
                map.addOverLay(marker);
                markers.push(marker);

                // 添加信息窗口
                const infoWin = new T.InfoWindow();
                const content = `
                    <div class="info-window">
                        <h4>${point.name}</h4>
                        <p><strong>原始坐标:</strong> ${point.x.toFixed(6)}, ${point.y.toFixed(6)}</p>
                        <p><strong>转换坐标:</strong> ${convertedCoord.lng.toFixed(6)}, ${convertedCoord.lat.toFixed(6)}</p>
                        <p><strong>类型:</strong> 绿波协调路口</p>
                    </div>
                `;
                infoWin.setContent(content);

                marker.addEventListener('click', function() {
                    marker.openInfoWindow(infoWin);
                });
            });

            // 添加绿波干线连线
            if (points.length >= 2) {
                const polyline = new T.Polyline(points, {
                    color: '#00E5FF',
                    weight: 4,
                    opacity: 0.8,
                    lineStyle: 'solid'
                });
                map.addOverLay(polyline);

                // 添加方向箭头
                addDirectionArrows(points);
            }
        }

        // 添加方向箭头
        function addDirectionArrows(points) {
            if (points.length < 2) return;

            for (let i = 0; i < points.length - 1; i++) {
                const start = points[i];
                const end = points[i + 1];
                
                // 计算中点
                const midLng = (start.lng + end.lng) / 2;
                const midLat = (start.lat + end.lat) / 2;
                const midPoint = new T.LngLat(midLng, midLat);

                // 计算角度
                const angle = Math.atan2(end.lat - start.lat, end.lng - start.lng) * 180 / Math.PI;

                // 创建箭头图标
                const arrowIcon = new T.Icon({
                    iconUrl: 'data:image/svg+xml;base64,' + btoa(`
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" 
                             transform="rotate(${angle})">
                            <path d="M12 2L22 12L12 22L12 17L2 17L2 7L12 7Z" fill="#00E5FF" stroke="#ffffff" stroke-width="1"/>
                        </svg>
                    `),
                    iconSize: new T.Point(24, 24),
                    iconAnchor: new T.Point(12, 12)
                });

                const arrowMarker = new T.Marker(midPoint, { icon: arrowIcon });
                map.addOverLay(arrowMarker);
            }
        }

        // 面板切换功能
        function togglePanel(panel) {
            const panelElement = document.querySelector(`.${panel}-panel`);
            const toggleBtn = panelElement.querySelector('.panel-toggle i');
            
            if (panelElement.classList.contains('collapsed')) {
                panelElement.classList.remove('collapsed');
                if (panel === 'left') {
                    toggleBtn.className = 'fas fa-chevron-left';
                } else {
                    toggleBtn.className = 'fas fa-chevron-right';
                }
            } else {
                panelElement.classList.add('collapsed');
                if (panel === 'left') {
                    toggleBtn.className = 'fas fa-chevron-right';
                } else {
                    toggleBtn.className = 'fas fa-chevron-left';
                }
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 等待天地图API加载
            if (window.T) {
                initMap();
            } else {
                // 如果天地图未加载，等待加载或显示错误
                let attempts = 0;
                const checkInterval = setInterval(() => {
                    attempts++;
                    if (window.T) {
                        clearInterval(checkInterval);
                        initMap();
                    } else if (attempts > 20) {
                        clearInterval(checkInterval);
                        initMap(); // 尝试初始化，会显示错误信息
                    }
                }, 500);
            }

            // 绑定面板切换事件
            document.querySelectorAll('.panel-toggle').forEach(btn => {
                btn.addEventListener('click', function() {
                    const panel = this.getAttribute('data-panel');
                    togglePanel(panel);
                });
            });
        });
    </script>
</body>

</html>